import $Element from "@/core/Element";
import ColorPicker from "../colorPicker/colorPicker";

const PlaygroundConfig = {
    scale:{},
    size:{},
    backgroundImg:"",
    backgroundColor:"#fff"
}
type TSettingButtons = "ColorPicker"|"BackgroundPicker";
export default class PlaygroundSetting extends $Element{
    private container:$Element;
    private funcButtons:Array<TSettingButtons> = [];
    constructor(container:$Element,funcButtons?: Array<TSettingButtons>){
        super("<div/>");
        this.container = container;
        this.container.appendChild(this);
        this.addClassName("playground-setting-menu");
        if(funcButtons){
            this.funcButtons = funcButtons;
            this.renderSettingBar();
        }
    }
    setButtons(buttons: Array<TSettingButtons>){
        this.funcButtons = buttons;
        this.renderSettingBar();
    }

    renderSettingBar(){
        this.empty();
        const self = this;
        this.funcButtons.forEach(button => {
            let buttonEle = new $Element("<div/>");
            buttonEle.addClassName("button");
            buttonEle.addEventListener("click",function(){
                if(button=="ColorPicker"){
                    const picker = new ColorPicker(self);
                }
            });
            this.appendChild(buttonEle);
        });
    }
    private createSetBackgroundColorButton(){

    }
    private createSetBackgroundImgButton(){

    }

}